<template>
  <!-- 预警历史 -->
  <div
    class="warn_history"
    v-infinite-scroll="load"
    infinite-scroll-disabled="loading"
    infinite-scroll-delay="200"
    infinite-scroll-distance="15"
    :infinite-scroll-immediate="true"
  >
    <div v-for="(item, i) in historyList" :key="i">
      <div class="history_time">
        <div class="time">{{ item.time }}</div>
        <img
          class="expend"
          v-show="item.flag"
          src="@/assets/img/icon_XS.png"
          alt=""
          @click="item.flag = !item.flag"
        />
        <img
          class="expend"
          v-show="!item.flag"
          src="@/assets/img/icon_xx1.png"
          alt=""
          @click="item.flag = !item.flag"
        />
      </div>
      <div class="history_line" v-show="item.flag == true">
        <div class="time_line">
          <div
            v-for="(item1, index) in item.list"
            :key="index"
            class="time_line_div"
          >
            <div
              class="line"
              :style="lang == 'en' ? 'height: 80px;' : 'height: 60px;'"
              v-if="item.list.length - 1 !== index"
            ></div>
            <div class="dot"></div>
            <div class="time">{{ item1.create_time | date }}</div>
            <!-- 涨跌内容 -->
            <div class="content">
              <div class="stock">
                <div class="stock_infos">
                  <img
                    class="type_icon1"
                    :src="
                      item1.market == 'HKEX'
                        ? HKicon
                        : item1.market == 'US'
                        ? USicon
                        : CNicon
                    "
                    alt=""
                  />
                  <span class="stock_name1">{{
                    `${item1.name} (${item1.symbol})`
                  }}</span>
                </div>
              </div>
              <div
                class="content_item"
                v-for="(i, index) in item1.contentItem"
                :key="index"
              >
                <span>{{ i[0] }}</span>
                <span v-if="index == 0" class="white">{{ i[1] }}</span>
                <span
                  v-else
                  :class="
                    item1.pushType == 1 || item1.pushType == 3 ? 'red' : 'green'
                  "
                  >{{ i[1] }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p class="more" v-if="loading && !finished">{{ $t("m.Loading") }}</p>
    <p v-if="finished" class="more">{{ $t("m.No_more") }}</p>
  </div>
</template>
<script>
import { get_notice_list } from "@/assets/js/API/user.js";
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val * 1000).format("HH:mm");
    },
  },
  created() {
    this.lang = localStorage.getItem("lang");
  },
  data() {
    return {
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      CNicon: require("@/assets/img/icon_sh.png"),
      historyTime: new Date(),
      historyList: [],
      loading: true,
      finished: false, // 请求完成
      page: 1, // 预警历史页数
      contentList: [], // 预警内容
      lang: "",
    };
  },
  methods: {
    // 预警历史,股价提醒
    async getHistory() {
      if (!this.finished) {
        const res = await get_notice_list({
          type: 1,
          page: this.page,
        });
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.length > 0) {
          this.historyList = [...this.historyList, ...res.data.list];
          this.page++;
          this.contentList = [
            ...this.contentList,
            ...this.getContent(res.data.list),
          ];
          for (let m = 0; m < this.historyList.length; m++) {
            this.$set(this.historyList[m], "flag", true);
            for (let n = 0; n < this.historyList[m].list.length; n++) {
              this.$set(
                this.historyList[m].list[n],
                "contentItem",
                this.contentList[m][n]
              );
            }
          }
        } else {
          this.finished = true;
        }
        this.loading = false;
      }
    },
    // 预警内容切割
    getContent(list) {
      // 最外层historyList对应内容
      let contents = [];
      for (let m = 0; m < list.length; m++) {
        // historyList[m].list对应内容
        let content = [];
        for (let i = 0; i < list[m].list.length; i++) {
          let conts = []; //对应文本
          let val1 = list[m].list[i].content.split("%s");
          let val2 = list[m].list[i].contentParam.split("#");
          for (let j = 0; j < val2.length; j++) {
            let contentItem = [];
            contentItem[0] = val1[j];
            contentItem[1] = val2[j];
            conts.push(contentItem);
          }
          content.push(conts);
        }
        contents.push(content);
      }
      return contents;
    },
    load() {
      this.loading = true;
      this.getHistory();
    },
  },
};
</script>
<style lang="less">
.warn_history {
  height: 450px;
  overflow: auto;
  padding-right: 16px;
  padding-top: 5px;
  .history_time {
    border-top: 1px solid @LightBorderLine;
    display: flex;
    margin-right: 16px;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    .time {
      color: @hoverColor;
    }
    .expend {
      height: 20px;
      cursor: pointer;
    }
  }
}
.time_line {
  position: relative;
  width: 100%;
  // margin-top: 10px;
  margin-right: 16px;
  .time_line_div {
    position: relative;
    min-height: 54px;
    .time {
      position: absolute;
      left: 20px;
      color: @fbSix;
      font-size: 12px;
    }
    .line {
      // min-height: 60px;
      width: 2px;
      position: absolute;
      top: 8px;
      left: 3px;
      z-index: 2;
      background-color: @hoverColor;
    }
    .dot {
      position: absolute;
      left: 0;
      width: 9px;
      height: 9px;
      top: 8px;
      background: @hoverColor;
      border-radius: 50%;
      z-index: 10;
    }
    .content {
      // position: absolute;
      margin-left: 80px;
      color: @fbSix;
      font-size: 12px;
      .stock {
        color: @fff;
        .stock_infos {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .type_icon1 {
            height: 13px;
            width: 20px;
            margin-right: 10px;
          }
        }
      }
      .content_item {
        display: inline;
        span {
          padding-right: 5px;
          display: inline-block;
          white-space: normal;
          word-break: break-all;
        }
      }
    }
  }
  .white {
    color: @fff;
  }
}
</style>